<template>
  <div>
    <template>
 <el-cascader
 class="select"
      ref="menuref"
    v-model="props"
    :options="options"
    :props="props"
    @change="selectFilter"
    ></el-cascader>
      <el-table
        :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        style="width: 100%">

        <el-table-column
          prop="Time"
          label="日期"
          sortable
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="Title"
          label="标题"
          width="700"
          :formatter="formatter"
          :show-overflow-tooltip='true'>
        </el-table-column>
        <el-table-column
          prop="Author"
          label="作者"
          width="120">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <div class="page">
      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pagesize"
      background
      layout="prev, pager, next"
      :total="tableData.length">
    </el-pagination>
    </div>
  </div>

</template>

<script>
export default {
  name: "filterTable",
  data () {
    return {
      currentPage: 1,
      pagesize: 10,
      tableData: [],
      allData: [],
      Visible: false,
      coverPic: "",
      disabled: false,
      hideUpload: false,
      props: {label: "Name", value: "Id", children: "Childrens"},
      options: [],
      value: ""
    }
  },
  methods: {
    toType (obj) {
      return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
    },
    filterNull (o) {
      for (var key in o) {
        if (o[key] === null) {
          delete o[key]
        }
        if (this.toType(o[key]) === "string") {
          o[key] = o[key].trim()
          if (o[key].length === 0) {
            delete o[key]
          }
        } else if (this.toType(o[key]) === "object") {
          o[key] = this.filterNull(o[key])
        } else if (this.toType(o[key]) === "array") {
          o[key] = this.filterNull(o[key])
          if (o[key].length === 0) {
            delete o[key]
          }
        }
      }
      return o
    },
    gettreemenu () {
      this.$request.gettreejson().then(res => {
        this.options = res.data
        // 过滤参数，去掉空值
        this.toType(this.options)
        this.filterNull(this.options)
        console.log(res.data)
      }).catch((err) => {
        console.log(err)
      })
    },
    // 文章列表
    getarticle () {
      // let _this = this
      this.$request.fetchArticleList().then(res => {
        this.allData = res.data.filter(item => (item.MenuId !== "000000" && item.MenuId !== "111111"))
        for (var i = 0; i < this.allData.length; i++) {
          this.allData[i].Time = this.allData[i].Time.substring(0, 10)
        }
        this.tableData = this.allData
      }).catch((err) => {
        console.log(err)
      })
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage) // 点击第几页
    },
    handleEdit (index, row) {
      this.$router.push({name: "manageArticle", params: {id: row.Id, title: row.Title, content: row.Markdown, author: row.Author}})
    },
    handleDelete (index, row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true
      }).then(() => {
        this.$request.fetchDelArticle({id: row.Id
        }).then(res => {
          if (res.status === 200) {
            this.$message({
              message: "删除成功",
              type: "success"
            })
          } else {
            this.$message({
              message: "删除失败",
              type: "error"
            })
          }
          this.getarticle()
        }).catch(err => console.log(err))
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        })
      })
    },
    filterHandler (value, row, column) {
      const property = column["property"]
      return row[property] === value
    },
    selectFilter (value) {
      console.log(value)
      this.tableData = this.allData.filter(item => (item.MenuId === value[value.length - 1]))
    }
  },
  mounted () {
    this.getarticle()
    this.gettreemenu()
  }
}
</script>

<style >
.select {
  margin-bottom: 10px;
}
.hide .el-upload--picture-card {
    display: none;
    /* width: 1rem;
    height: 1.35rem;
    overflow:hidden; */
}
.hide .el-upload{
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.hide .el-upload:hover{
  border-color: #409eff;
}
.page{
  /* float: center; */
  text-align:center;
  margin:0 auto;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
.photo{
  position: absolute;
  right:2.5rem;
  /* width: 1rem;
  height: 1.35rem; */
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
}
.baseTheme .el-upload--picture-card {

  background-position-x: center;
  background-position-y: center;
  background-size: 100% 100%;
  width: 190px;
  height: 150px;
}
.baseTheme .el-upload-list--picture-card .el-upload-list__item {
  width: 190px;
  height: 150px;
  position: inherit;

}
.baseTheme .el-upload-list--picture-card .el-upload-list__item-actions {
  width: 190px;
  height: 150px;
}
</style>
